<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>超市订单管理系统</title>
		<link type="text/css" rel="stylesheet" href="../css/style.css" />
		<link type="text/css" rel="stylesheet" href="../css/public.css" />
		<style>
			body{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="location">
			<strong>你现在所在的位置是:</strong> <span>订单管理页面</span>
		</div>
		<div class="search">
			<form method="get">
				<input name="method" value="query" class="input-text" type="hidden">
				<span>商品名称：</span> <input id="productName"> <span>供应商：</span>
				<select id="providerList">
					<option value="">--请选择--</option>
					<option>供应商1</option>
					<option>供应商2</option>
					<option>供应商3</option>
				</select>
				<span>是否付款：</span>
				<select id="isPayment">
					<option value="">--请选择--</option>
					<option value="1">未付款</option>
					<option value="2">已付款</option>
				</select> <input value="查 询" type="button" id="searchbutton" onclick="selectUser()">
				<a href="bill_add.html">添加订单</a>
			</form>
		</div>
		<!--账单表格 样式和供应商公用-->
		<table class="providerTable" cellpadding="0" cellspacing="0">
			<tr class="firstTr">
				<th width="10%">订单编码</th>
				<th width="10%">商品名称</th>
				<th width="20%">供应商</th>
				<th width="10%">订单金额</th>
				<th width="10%">是否付款</th>
				<th width="10%">创建时间</th>
				<th width="10%">操作</th>
			</tr>
			<tr>
				<td><span id="billCode">BILL2016_001</span></td>
				<td><span id="productName_bill">洗发水、护发素</span></td>
				<td><span id="proName">山东豪克华光联合发展有限公司</span></td>
				<td><span id="totalPrice">25000.00</span></td>
				<td><span id="isPayment_bill">未付款</span></td>
				<td><span id="creationDate">2014-12-14 15:50:24</span></td>
				<td>
					<span>
						<a class="viewBill" href="javascript:;">
							<img src="../images/read.png" alt="查看" title="查看" />
						</a>
					</span>
					<span>
						<a class="modifyBill" href="javascript:;">
							<img src="../images/xiugai.png" alt="修改" title="修改" />
						</a>
					</span>
					<span>
						<a class="deleteBill" href="javascript:;" onclick="delBill()">
							<img src="../images/schu.png" alt="删除" title="删除" />
						</a>
					</span>
				</td>
			</tr>
		</table>

		<!--分页-->
		<div class="page-bar">
			<ul class="page-num-ul clearfix">
				<li>共<span id="billCount"></span>条记录<span id="pageNow"></span>/<span id="pageTotal"></span>页</li>
				<li><a name="prev" href="javascript:jumpPage(0);">首页</a></li>
				<li><a name="prev" href="javascript:jumpPage(1);">上一页</a></li>
				<li><a name="next" href="javascript:jumpPage(2);">下一页</a></li>
				<li><a name="next" href="javascript:jumpPage(3);">最后一页</a></li>
			</ul>
			<span class="page-go-form">
				<label>跳转至</label>
				<input type="number" name="inputPage" id="inputPage" class="page-key" onkeydown="toJump()" />页
				<button type="button" class="page-btn" onclick="jump()">GO</button>
			</span>
		</div>
		<!--点击删除按钮后弹出的页面-->
		<div class="zhezhao"></div>
		<div class="remove" id="removeBi">
			<div class="removerChid">
				<h2>提示</h2>
				<div class="removeMain">
					<p>你确定要删除该订单吗？</p>
					<a href="#" id="yes" onclick="yes()">确定</a> <a href="#" id="no" onclick="no()">取消</a>
				</div>
			</div>
		</div>
	<script src="../js/jquery-3.5.1.js"></script>
	<script>
		/**
		 * 查询供应商列表
		 */
		//复制模板
		var option_template=$("#providerList option:eq(1)");
		loaddata_providerList();

		function loaddata_providerList(){
			$.ajax({
				url:"../provider/getProviderList",
				dataType:"json",
				success:function (result){
					if (result.flag){
						//渲染供应商列表
						renderData_providerList(result.data);
					}else {
						alert(result.msg);
					}
				},
				error:function (jqxhr){
					alert("请求出错:"+jqxhr.status);
				}
			});
		}
		//渲染供应商列表
		function renderData_providerList(providerList){

			$("#providerList option:gt(0)").remove();
			for (var i=0;i<providerList.length;i++){
				var option=option_template.clone();
				option.text(providerList[i].proName);
				option.attr("value",providerList[i].id);

				$("#providerList").append(option);
			}
		}
		/**
		 * 条件分页查询订单列表
		 */
		var pageNow=1;
		var pageSize=5;
		var pageTotal;
		loadData_billList();

		//点击查询
		function selectUser(){
			pageNow=1;
			loadData_billList();
		}
		function loadData_billList(){
			var params={
				"productName":$("#productName").val(),
				"providerId":$("#providerList").val(),
				"isPayment":$("#isPayment").val()
			};
			//发送ajax异步请求
			$.ajax({
				url: "../bill/getBillList/"+pageNow+"/"+pageSize,
				data:params,
				dataType: "json",
				success:function (result){
					if (result.flag){
						//渲染订单列表
						renderData_billList(result.data.data);
						//渲染页码
						renderData_page1(result.data);
					}else {
						alert(result.msg);
					}
				},
				error:function (jqxhr){
					alert("请求出错:"+jqxhr.status);
				}
			});
		}
		//渲染订单列表
		function renderData_billList(billList){
			var tr_template=$(".providerTable tr:eq(1)");
			//移除原来的tr
			$(".providerTable tr:gt(0)").remove();
			for (var i=0;i<billList.length;i++){
				var tr=tr_template.clone();
				tr.find("#billCode").text(billList[i].billCode);
				tr.find("#productName_bill").text(billList[i].productName);
				tr.find("#proName").text(billList[i].provider.proName);
				tr.find("#totalPrice").text(billList[i].totalPrice);
				tr.find("#isPayment_bill").text(billList[i].isPayment==1?"未付款":"已付款");
				tr.find("#creationdate").text(billList[i].creationDate);

				//删除订单
				tr.find(".deleteBill").attr("onclick","delBill("+billList[i].id+")");
				$(".providerTable").append(tr);
			}
		}
		//渲染页码
		function renderData_page1(result){
			$("#billCount").text(result.count);
			$("#pageNow").text(result.pageNow);
			$("#pageTotal").text(result.pageTotal);
			pageTotal=result.pageTotal;

			if (pageNow==1){
				$("[name='prev']").hide();
			}else {
				$("[name='prev']").show();
			}

			if (pageNow==pageTotal){
				$("[name='next']").hide();
			}else {
				$("[name='next']").show();
			}
		}
		//翻页跳转
		function jumpPage(e){
			switch (e){
				case 0:
					pageNow=1;
					break;
				case 1:
					pageNow--;
					break;
				case 2:
					pageNow++;
					break;
				case 3:
					pageNow=pageTotal;
					break;
			}
			loadData_billList();
		}
		//输入页码跳转
		function jump(){
			var page=$("#inputPage").val();
			if (page>0&&page<=pageTotal){
				pageNow=page;
				loadData_billList();
			}else {
				//获得焦点,选中内容
				$("#inputPage").focus().select();
			}
		}
		//键盘按下查询,enter
		function toJump(){
			var code=event.keyCode;
			if (code==13){
				jump();
			}
		}

	</script>

	</body>
</html>
